<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?mgw9fn');
            src: url('fonts/icomoon.eot?mgw9fn#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?mgw9fn') format('truetype'),
                url('fonts/icomoon.woff?mgw9fn') format('woff'),
                url('fonts/icomoon.svg?mgw9fn#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        input[type=text] {
            color: pink;
        }

        ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: fuchsia;
        }

        ul li:nth-child(4) {
            background-color: goldenrod;
        }

        ul li:nth-child(even) {
            background-color: gray;
        }

        /* ul li:nth-child(odd) {
            background-color: gainsboro;
        } */
        ol li:nth-child(n+4) {
            background-color: brown;
        }

        .one>li:nth-child(-n+4) {
            background-color: rgb(89, 34, 178);
        }

        .two ::before {
            content: '我';
        }

        .two::after {
            content: '奥特曼';
        }

        .three {
            width: 200px;
            height: 35px;
            border: 1px solid red;
            position: relative;
            /* font-family: 'icomoon'; */
        }

        .three::after {
            position: absolute;
            top: 10px;
            right: 40px;
            font-family: 'icomoon';
            content: '';
        }

        .four {
            width: 200px;
            height: 35px;
            border: 1px solid red;
            position: relative;
            font-family: 'icomoon';
        }

        .four::after {
            /* display: inline-block; */
            position: absolute;
            top: 10px;
            right: 40px;
            font-family: 'icomoon';
            content: '\e911';
        }
    </style>
</head>

<body>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
        <li>我是第9个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
        <li>我是第9个孩子</li>
    </ol>
    <ol class="one">
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
        <li>我是第9个孩子</li>
    </ol>
    <din class="two">是</din>
    <div class="three"></div>
    <div class="four"> </div>
</body>

</html>